<script setup lang="ts">
const props = withDefaults(defineProps<{
    maskCloseable?: boolean,
    show: boolean
}>(), {
    maskCloseable: true
});

const emits = defineEmits<{
    (e: "update:show", value: boolean): void
}>();

</script>

<template>
    <div class="drawer-modal-container">
        <!-- mask -->
        <transition name="drawer-modal-mask" mode="out-in">
            <div v-if="show" class="drawer-modal-mask" @click="props.maskCloseable && emits('update:show', false)"/>
        </transition>
        <!-- container -->
        <div class="drawer-modal-content" :class="{ display: props.show }">
            <n-scrollbar style="max-height: 65vh">
                <slot/>
            </n-scrollbar>
            <div class="flex-shrink-0">
                <slot name="footer"/>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.drawer-modal-container {
    @apply fixed;
    z-index: 99;

    .drawer-modal-mask {
        @apply fixed top-0 left-0 w-full h-full;
        background: var(--sys-mask-background);
    }
    .drawer-modal-content {
        @apply fixed bottom-0 left-0 w-full flex flex-col gap-5 rounded-t-3xl p-6 pt-14;
        transition: transform .3s ease-in-out;
        transform: translateY(101%);

        color: var(--sys-text-color);
        background: var(--sys-drawer-modal-background);

        &.display {
            transform: translateY(0%);
        }

        &::before {
            @apply rounded-xl absolute left-1/2 -translate-x-1/2;
            content: '';
            top: 10px;
            width: 80px;
            height: 10px;
            background: var(--sys-mask-background);
            opacity: 80%;
        }
    }
}

.drawer-modal-mask-enter-active,
.drawer-modal-mask-leave-active {
    transition: opacity 0.3s ease;
}

.drawer-modal-mask-enter-from,
.drawer-modal-mask-leave-to {
    opacity: 0;
}
</style>